<template xmlns="http://www.w3.org/1999/html">
	<div class="layout-padding">
		<splitpanes horizontal>
			<pane size="50">
				<div class="layout-padding-auto layout-padding-view">
					<!--region 主表的搜索栏-->
					<el-row>
						<el-form :model="state.queryForm" ref="queryRef" :inline="true" @keyup.enter="searchCheckStockH" >
							<el-form-item :label="$t('wms.billcode')" prop="billCode">
								<el-input
									:placeholder="$t('form.pleaseInput', [$t('wms.billcode')])"
									clearable
									v-model="state.queryForm.billCode"
									style="width: 200px"
								/>
							</el-form-item>
							<el-form-item :label="$t('field.createTime')" prop="checkStockTimeInput">
								<el-date-picker
									v-model="checkStockTimeInput"
									type="daterange"
									unlink-panels
									range-separator="To"
									:start-placeholder="$t('form.monthrange', 1)"
									:end-placeholder="$t('form.monthrange', 2)"
									:shortcuts="shortcuts"
								/>
							</el-form-item>
							<el-form-item>
								<el-button @click="searchCheckStockH" icon="search" type="primary">
									{{ $t('btn.search') }}
								</el-button>
							</el-form-item>
							<el-form-item>
								<el-button @click="resetQuery" icon="Refresh">{{ $t('btn.reset') }}</el-button>
							</el-form-item>
							<el-form-item></el-form-item>
						</el-form>
					</el-row>
					<el-row class="mb-2" >
						<!--遍历mainBtnList-->
						<el-button
							v-for="(item, index) in mainBtnList"
							:key="index"
							:icon="item.icon"

							:loading="btnLoading[item.key]"
							:plain="!!item.plain"
							:type="item.type"
							@click="item.clickMethod"
						>
							{{ item.label }}
						</el-button>
						<el-dropdown class="ml-3" @command="exportCommand">
							<el-button type="primary" >
								<el-icon class="mr-1">
									<Download />
								</el-icon>
								{{ $t('checkStock.export') }}
								<el-icon class="el-icon--right">
									<arrow-down />
								</el-icon>
							</el-button>
							<template #dropdown>
								<el-dropdown-menu>
									<el-dropdown-item command="1">{{ $t('checkStock.ExportList') }}</el-dropdown-item>
									<el-dropdown-item command="2">{{ $t('checkStock.ExportLevelingDetail') }}</el-dropdown-item>
									<el-dropdown-item command="3">{{ $t('checkStock.ExportInventoryVariance') }}</el-dropdown-item>
								</el-dropdown-menu>
							</template>
						</el-dropdown>
					</el-row>
					<!--endregion-->
					<!--region表格区域-->
					<el-table
						:data="state.dataList"
						v-loading="state.loading"
						border highlight-current-row
						stripe
						:cell-style="tableStyle.cellStyle"
						:header-cell-style="tableStyle.headerCellStyle"

						class="layout-padding-view"
						ref="mainTable"
						:expand-row-keys="expandRowKeys"
						:row-key="rowKey"
						:class="'main-table'"
						@selection-change="handleSelectionChange"
						@sort-change="sortChangeHandle"
						@row-click="rowClick"
					>
						<el-table-column type="expand">
							<template #default="props">
								<warehouse-h
									:data="props.row.wmsCheckstockWarehouseDList"
									@change-status="returnAuditMethod"
									@row-click="expandRowClick"
									@show-image="showPic"
								></warehouse-h>
							</template>
						</el-table-column>

						<el-table-column type="selection" width="40" align="center" />
						<el-table-column align="center" width="80" prop="id" label="ID" />
						<el-table-column prop="billCode" :label="$t('checkStock.billcode')" />
						<el-table-column prop="warehouseName" :label="$t('checkStock.warehouse')">
							<template #default="scope">
								<span class="label label-primary border-radius-left25">{{ scope.row.warehouseName || '-' }}</span>
								<span class="label label-light border-radius-right25">{{ scope.row.warehouseCode || '-' }}</span>
							</template>
						</el-table-column>
						<el-table-column prop="status" :label="$t('checkStock.status')">
							<template #default="scope">
								<el-tag :type="getTagAttrByStatus(scope.row.status).type" :effect="getTagAttrByStatus(scope.row.status).effect">
									{{ getCheckStatusItemText(scope.row.status) }}
								</el-tag>
							</template>
						</el-table-column>
						<el-table-column prop="createUserName" :label="$t('checkStock.createUserName')" />
						<el-table-column prop="creationTime" label="创建时间" />
						<el-table-column prop="closeCaseTime" :label="$t('checkStock.closeCaseTime')" />
						<el-table-column prop="closeCaseName" :label="$t('checkStock.closeCaseName')" />
					</el-table>
					<pagination @size-change="sizeChangeHandle"  @current-change="currentChangeHandle" v-bind="state.pagination" />
					<!--endregion-->
				</div>
			</pane>
			<pane size="50">
				<splitpanes>
					<pane size="50">
						<material-detail :data="materialDetailParams" @rowClick="clickMaterialRow"></material-detail>
					</pane>
					<pane size="50">
						<barcode-detail :data="barcodeDetailParams"></barcode-detail>
					</pane>
				</splitpanes>
			</pane>
		</splitpanes>
		<create-inventory-form ref="createInventoryRef" @refresh="searchCheckStockH" />
		<uncounted-barcode ref="uncountedBarcodeRef"/>
		<k3-contrast ref="k3ContrastRef"/>
		<div class="demo-image__preview">
			<el-image-viewer class="el-image-viewer" v-if="showStatus" :zoom-rate="1.2" @close="closePreview" :url-list="srcList" />
		</div>
	</div>
</template>

<script setup lang="ts">
import { BasicTableProps, useTable } from '/@/hooks/table';
import { useI18n } from 'vue-i18n';
import MaterialDetail from '/@/views/wms/checkStock/materialDetail.vue';
import BarcodeDetail from '/@/views/wms/checkStock/barcodeDetail.vue';
import CreateInventoryForm from '/src/views/wms/checkStock/components/createInventoryForm.vue';
import uncountedBarcode from '/src/views/wms/checkStock/components/uncountedBarcode.vue';
import k3Contrast from '/src/views/wms/checkStock/components/k3Contrast.vue';
import {shortcuts} from '/@/utils/CommonAttributes';
import {
	createMainBtnList,
	getCheckStatusItemText,
	getTagAttrByStatus,
	mainDgFunctions,
} from '/@/views/wms/checkStock/data';

import { checkstockHGetPageSet } from '/@/api/platform/mes/wmsCheckstock';
import { formatDate } from '/@/utils/formatTime';
import WarehouseH from '/src/views/wms/checkStock/components/warehouseD.vue';
import { ref } from 'vue';
const { t } = useI18n();

const today = new Date();
const endDate = new Date(today);
endDate.setDate(today.getDate() - 3); // 今天之后的6天，总共一周
const checkStockTimeInput = ref([endDate, today]);
const expandRowKeys = ref([]); // 设置 Table 目前的展开行
const multipleSelection = ref([]); // 表格选中行
const mainTable = ref();
const btnLoading = reactive({}) // 按钮加载状态

const createInventoryRef = ref();
const uncountedBarcodeRef = ref();
const k3ContrastRef = ref();

const srcList = ref([]);
const showStatus = ref(false);
const showPic = (url) => {
	srcList.value.push(import.meta.env.VITE_MINIO_VIEW_PROXY_PATH + url);
	showStatus.value = true;
};
const closePreview = () => {
	srcList.value.length = 0;
	showStatus.value = false;
};

const rowKey = (row) => {
	return row.billCode;
};

// 如果checkStockTimeInput发生变化分表给state.queryForm.checkStockTimeStart.checkStockTimeEnd 赋值
watch(checkStockTimeInput, (newValue, oldValue) => {
	if (newValue) {
		state.queryForm.checkStockTimeStart = formatDate(newValue[0], 'YYYY-mm-dd');
		state.queryForm.checkStockTimeEnd = formatDate(newValue[1], 'YYYY-mm-dd');
	} else {
		state.queryForm.checkStockTimeStart = null;
		state.queryForm.checkStockTimeEnd = null;
	}
});



// 变量
const queryRef = ref();
const barcodeDetailParams = reactive({});
const materialDetailParams = reactive({});

// 表单
const state: BasicTableProps = reactive<BasicTableProps>({
	queryForm: {
		checkStockTimeStart: checkStockTimeInput.value ? formatDate(checkStockTimeInput.value[0], 'YYYY-mm-dd') : '',
		checkStockTimeEnd: checkStockTimeInput.value ? formatDate(checkStockTimeInput.value[1], 'YYYY-mm-dd') : '',
	},
	pageList: checkstockHGetPageSet,
});

const { exportCommand } = mainDgFunctions(t, state, multipleSelection);

// 表格
const { getDataList, currentChangeHandle, sizeChangeHandle, sortChangeHandle, tableStyle } = useTable(state);

// 创建主表格的按钮
const mainBtnList = createMainBtnList({t, createInventoryRef, multipleSelection, getDataList,uncountedBarcodeRef,k3ContrastRef,btnLoading});

// 重置搜索条件
const resetQuery = () => {
	// 清空搜索条件
	queryRef.value?.resetFields();
	checkStockTimeInput.value = null;
	// 清空多选
	getDataList();
};

// 搜索
const searchCheckStockH = () => {
	expandRowKeys.value.length = 0;
	getDataList();
};

// 表格选中事件
const handleSelectionChange = (val) => {
	multipleSelection.value = val;
};

const rowClick = (row) => {
	materialDetailParams.billCode = row.billCode;
	barcodeDetailParams.billCode = row.billCode;

	materialDetailParams.checkStockHId = '';
	barcodeDetailParams.masterId = '';
	barcodeDetailParams.materialCode = '';
};

const clickMaterialRow = (row) => {
	barcodeDetailParams.materialCode = row.materialCode;
	barcodeDetailParams.masterId = row.checkStockHId;
};

const expandRowClick = (row) => {
	materialDetailParams.billCode = row.billCode;
	barcodeDetailParams.billCode = row.billCode;

	materialDetailParams.checkStockHId = row.id;
	barcodeDetailParams.masterId = row.id;
	barcodeDetailParams.materialCode = '';
};

const returnAuditMethod = (billCode) => {
	expandRowKeys.value.length = 0;
	expandRowKeys.value.push(billCode);
	getDataList();
};
</script>

<style scoped lang="scss">
/* 解决展开时，滚动原表格，子表格展示问题 */
.main-table {
	.nested-table {
		position: sticky;
		left: 0;
		z-index: 3; /* 确保嵌套表格在主表格之上 */
	}
}

.el-form-item {
	margin-bottom: 5px;
}

.label {
	display: inline-block;
	padding: 0.2em 0.6em 0.3em;
	font-size: 75%;
	font-weight: 700;
	line-height: 20px;
	min-width: 60px;
	color: #fff;
	text-align: center;
	white-space: nowrap;
	vertical-align: baseline;
	/*border-radius-: .25em;*/
}

.label-success {
	background-color: #5cb85c;
}

.label-default {
	background-color: #777;
}

.label-primary {
	background-color: #337ab7;
}

.label-secondary {
	background-color: #6c757d;
}

.label-light {
	color: #212529;
	background-color: #f8f9fa;
}

.border-radius-left25 {
	border-radius: 0.25em 0 0 0.25em;
}

.border-radius-right25 {
	border-radius: 0 0.25em 0.25em 0;
}
</style>
